<template>
  <!-- 访客记录-详情 -->
  <public-modal
    :footer="false"
    :publicVisible="publicVisible"
    cancelContext="拒绝"
    confirmContext="通过"
    modalStyle="detailModal"
    title="详情页"
    width="720px"
    @cancel="cancel"
    @handleOk="handleOk"
  >
    <div slot="content">
      <div class="common-title">
        <div class="icon"></div>
        <div class="content">投诉详情</div>
      </div>

      <table style="margin: 12px 0">
        <tr>
          <td class="td-label">建议时间</td>
          <td class="td-value text-overflow" colspan="3">
            {{ details.adviseTime }}
          </td>
        </tr>

        <tr>
          <td class="td-label">建议人姓名</td>
          <td class="td-value text-overflow">
            {{ details.adviseName }}
          </td>
          <td class="td-label">联系电话</td>
          <td class="td-value text-overflow">
            {{ details.adviseMobile }}
          </td>
        </tr>

        <tr>
          <td class="td-label">建议内容</td>
          <td class="td-value text-overflow" colspan="3">
            {{ details.adviseContent }}
          </td>
        </tr>

        <tr style="height: auto">
          <td class="td-label">图片</td>
          <td class="td-value p-14" colspan="3">
            <div class="img-wrap flex">
              <img
                v-for="item in clue_photo"
                :id="item"
                :key="item"
                :data-original="imgPrefix + item"
                :src="imgPrefix + item"
                class="click-img"
                @click="werImg(item)"
              />
            </div>
          </td>
        </tr>
      </table>

      <div class="common-title">
        <div class="icon"></div>
        <div class="content">回复详情</div>
      </div>

      <table style="margin-top: 12px">
        <tr>
          <td class="td-label">回复单位</td>
          <td class="td-value text-overflow">
            {{ details.policeAgencyName }}
          </td>
          <td class="td-label">回复时间</td>
          <td class="td-value text-overflow">
            {{ details.replyTime }}
          </td>
        </tr>

        <tr>
          <td class="td-label">回复内容</td>
          <td class="td-value text-overflow" colspan="3">
            {{ details.replyContent }}
          </td>
        </tr>
      </table>
    </div>

    <div slot="footer"></div>
  </public-modal>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import publicModal from '@/components/publicModal'
import { getAction } from '@/api/manage'
import { ajaxGetDictItems } from '@/api/api'
import { getPrefixImg } from '../../../../utils/util'
export default {
  name: 'detailModal',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      details: {},
      imgPrefix: '',
      clue_photo: [],
    }
  },
  methods: {
    show(records) {
      this.publicVisible = true

      this.getDist()
      this.get_detail(records.id)
      this.get_clue_photo(records.id)
    },

    async get_clue_photo(id) {
      this.clue_photo = []
      let { result: clue_photo } = await getAction('/sys/images_path/list', { bizId: id, bizType: 23 })
      clue_photo.forEach((item) => {
        this.clue_photo.push(item.path)
      })
    },

    async get_detail(id) {
      let { result } = await getAction('/common/advise_message/web_detail', { id })
      this.details = result
    },

    async getDist() {
      let { result: static_server } = await ajaxGetDictItems({ code: 'static_server' })
      this.imgPrefix = getPrefixImg()
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    handleOk() {
      this.publicVisible = false
    },
    cancel() {
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 20px 20px;
  border-radius: 0 0 4px 4px;
}

/deep/ .modalFooter {
  height: 0 !important;
}

table {
  border-collapse: collapse;
}
tr {
  height: 46px;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
}
.td-label {
  background: var(--theme-modal-label-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-tab-text-color);
  width: 120px;
  text-align: center;
}

.td-value {
  background: var(--theme-container-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-modal-label-value-color);
  padding-left: 25px;
  width: 220px;
  max-width: 220px;
}

.click-style {
  color: #47e829;
  cursor: pointer;
}

.p-14 {
  padding: 14px 20px;
}

.click-img {
  width: 150px;
  height: 170px;
  object-fit: cover;
  cursor: pointer;
  margin-left: 10px;
}
</style>
